<template>
  <div class="block">
    <Title
      minTitle="安全"
      title="API访问密钥"
      introduce="使用访问密钥向SenseCAP API服务发出安全的REST或HTTP请求"
    />
    <el-table :data="securityList" border style="width: 100%" class="teble">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="tag" label="标签"></el-table-column>
      <el-table-column prop="id" width="200" label="秘钥ID"></el-table-column>
      <el-table-column prop="authority" width="80" label="访问权限">
      </el-table-column>
      <el-table-column prop="online" label="秘钥状态">
        <template slot-scope="scope">
          {{ scope.row.online | listLabel }}
        </template>
      </el-table-column>
      <el-table-column prop="cTime" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.cTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column prop="uTime" label="更新时间">
        <template slot-scope="scope">
          {{ scope.row.cTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作" class="caozuo">
        <i class="iconfont icon-bianji"></i>
        <i class="iconfont icon-Delete"></i>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import { $securityList } from "@/api/index.js";

export default {
  name: "miyaolist",
  data() {
    return {
      securityList: [],
      date: [], // 插件选择的时间
    };
  },
  components: {
    Title,
  },
  filters: {
    listLabel(value) {
      return value == true ? "使用中" : "未使用";
    },
    formatDate(date) {
      const d = new Date(date);
      const month = d.getMonth() + 1; //月份
      const day = d.getDate(); //日
      const hour = d.getHours(); //小时
      const minutes = d.getMinutes(); //分
      const seconds = d.getSeconds(); //秒
      return `${d.getFullYear()}-${month}-${day} ${hour}:${minutes}:${seconds}`;
    },
  },
  watch: {
    date(val) {
      if (val) {
        const d1 = val[0];
        const d2 = val[1];
        const time1 = d1 && d1.getTime();
        const time2 = d2 && d2.getTime();
        if (time1 && time2) {
          this.query.date = time1 + "-" + time2;
        } else {
          this.query.date = "";
        }
      } else {
        this.query.date = "";
      }
    },
  },
  created() {
    $securityList().then((res) => {
      this.securityList = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.block /deep/ th div,
/deep/ td div {
  text-align: center;
}

.icon-bianji,
.icon-Delete {
  color: #fff;
  padding: 5px;
  border-radius: 50%;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.icon-bianji {
  background-color: #409eff;
}

.icon-Delete {
  background-color: #f56c6c;
}
</style>
